<template>
  <div class="account_wrapper">
    <account-card
        :title="accountTitle"
    />

    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="90px" class="account_change_pass">
      <el-form-item label="原邮箱账号" prop="oldMail">
        <el-input disabled v-model.number="formData.oldMail"></el-input>
      </el-form-item>
      <el-form-item label="新邮箱账号" prop="mail">
        <el-input v-model="formData.mail" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="pass">
        <el-input type="password" v-model="formData.pass" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <div style="width: 100%">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>

      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import AccountCard from "../account/components/AccountCard"

  export default {
    name: "",
    components: {
      AccountCard
    },
    inject: ['userInfo'],
    data() {
      const validateMail = (rule, value, callback) => {
        if (!value) {
          return callback(`${rule.meg}不能为空`);
        }
        callback();
      }

      return {
        formData: {
          oldMail: '',
          mail: '',
          pass: ''
        },
        rules: {
          oldMail: [{validator: validateMail, meg: '原邮箱账号', trigger: 'blur'}],
          mail: [{validator: validateMail, meg: '新邮箱账号', trigger: 'blur'}],
          pass: [{validator: validateMail, meg: '密码', trigger: 'blur'}],
        }
      }
    },
    mounted() {
      this.formData.oldMail = this.userInfo.email
    },
    computed: {
      accountTitle() {
        return `当前账号 : ${this.userInfo.email}`
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formData);
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped lang="scss">
  .account_wrapper {
    .account_change_pass {
      width: 50%;
      min-width: 380px;
      margin: 35px auto 0;
    }
  }
</style>